<template>
  <!-- 单选 -->
  <el-form
    ref="form"
    :model="form"
    :readonly="!isEdit" 
    :disabled="!isEdit"
    :rules="rules"
    label-width="140px"
  >
  <el-row>
    <el-col :span="24">
          <el-form-item label="难度" prop="level">
            <el-radio-group v-model="form.level"  >
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
  <el-col :span="24">
    <el-form-item label="题干" prop="stem">
      <el-input
        :maxlength="200"
        show-word-limit
        type="textarea"
        v-model.trim="form.stem"
        rows="4"
        class="textareaClass"
        placeholder="请输入题干"
      ></el-input>
    </el-form-item>
  </el-col>
</el-row>
    <el-row>
      <el-col :span="24" v-for="(option, index) in form.options" :key="index">
        <el-form-item
          :label="'选项' + String.fromCharCode(Number(index + 65)) + '：'"
          :prop="'options.' + index + '.questionStems'"
          :rules="[
            {
              required: true,
              message: '请输入选项' + String.fromCharCode(Number(index + 65)),
              trigger: ['blur'],
            },
          ]"
        >
          <el-input
            type="textarea"
            v-model:value.trim="option.questionStems"
            rows="4"
            :maxlength="200"
            show-word-limit 
            class="textareaClass"
            placeholder="请输入选项"
          ></el-input>
          <el-button
            v-if="index != 0"
            :disabled="form.options.length == 1"
            @click="delOption(index)"
            class="delete"
          >
            删除
          </el-button>
          <el-button
            v-show="form.options.length == index + 1 && form.options.length < 10"
            size="small"
            type="primary"
            @click="addOption"
            style="margin-left:20px"
          >新增选项
          </el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="正确答案：" prop="answer">
      <el-radio
        v-for="(option, index) in form.options"
        :key="index"
        v-model="form.answer"
        :label="String.fromCharCode(Number(index + 65))"
      >
        {{ String.fromCharCode(Number(index + 65)) }}
      </el-radio>
    </el-form-item>
  </el-form>
</template>

<script>
const createModalForm = {
  stem: "",
  options: [
    {questionStems: "", label: "A"},
    {questionStems: "", label: "B"},
    {questionStems: "", label: "C"},
    {questionStems: "", label: "D"},
  ],
  answer: "A",
  level:"1"
}
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    
  },
  name: "SanyuanMmFrontIndex",
  data() {
    return {
      // 表单校验
      rules: {
        level: [
          {required: true, message: "请选择难度", trigger: ["change"]},
        ],
        answer: [
          {required: true, message: "请输入答案", trigger: ["change"]},
        ],
        stem: [{required: true, message: "请输入题干", trigger: ["blur"]}],
      },
      form: Object.assign({}, createModalForm),
    }
  },
  watch: {
    form: {
      handler(newVal) {
        this.$emit("formData", newVal)
      },
      deep: true,
    },
  },
  mounted() {
  },
  methods: {
    addOption() {
      let label = String.fromCharCode(
        "A".charCodeAt() + this.form.options.length
      )
      this.form.options.push({
        questionStems: "",
        label: label,
      })
    },
    delOption(index) {
      this.form.options.splice(index, 1)
    },

    // 表单重置
    reset() {
      this.form = Object.assign({}, createModalForm)
      this.$refs.form.clearValidate()
      this.form.options = [
        {questionStems: "", label: "A"},
        {questionStems: "", label: "B"},
        {questionStems: "", label: "C"},
        {questionStems: "", label: "D"},
      ]
    },
    // 取消按钮
    cancel() {
      this.operatorDialog = false
      this.batchDialog = false
    },

    handleCheckedCitiesChange(value, args) {
      this.form[args.prop] = value.toString().toString()
    },
  },
}
</script>

<style lang="scss" scoped>
.batchPage {
  display: flex;
  flex: 1;
  flex-direction: row;
}

::v-deep .el-button {
  margin-top: 10px;
}
</style>
